<template>
    <div class="app-container">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="200px" class="demo-ruleForm">
      <el-form-item label="优先使用口令">
        <el-select v-model="ruleForm.show" placeholder="请选择">
          <el-option
            v-for="(v,k) in platform"
            :key="k"
            :label="v"
            :value="k">
          </el-option>
        </el-select>
      </el-form-item>
        <h1>抖音口令</h1>

        <el-row v-for="(value, index) in ruleForm.dy" :key="index">
          <el-col :span="9">
            <div class="">
                <el-form-item label="口令"  label-width="100px" :key="index"
                :prop="'dy[' + index + ']'"
                :rules="{required: true, message: '口令不能为空', trigger: 'blur'}"
                >
                <el-input v-model="ruleForm.dy[index]" />
                </el-form-item>
            </div>
            </el-col>
          <el-col :span="4"><div class="" style="line-height: 40px;">
            <el-button style="margin-left: 20px;" @click="delidList('dy',index)" icon="el-icon-minus" circle size="mini"></el-button>
          </div></el-col>
        </el-row>

        <el-button style="margin-left: 100px;" @click="addkl('dy')" icon="el-icon-plus" circle ></el-button>

        <h1>快手口令</h1>

        <el-row v-for="(value, index) in ruleForm.ks" :key="index">
          <el-col :span="9">
            <div class="">
                <el-form-item label="口令"  label-width="100px" :key="index"
                :prop="'ks[' + index + ']'"
                :rules="{required: true, message: '口令不能为空', trigger: 'blur'}"
                >
                <el-input v-model="ruleForm.ks[index]" />
                </el-form-item>
            </div>
            </el-col>
          <el-col :span="4"><div class="" style="line-height: 40px;">
            <el-button style="margin-left: 20px;" @click="delidList('ks',index)" icon="el-icon-minus" circle size="mini"></el-button>
          </div></el-col>
        </el-row>

        <el-button style="margin-left: 100px;" @click="addkl('ks')" icon="el-icon-plus" circle ></el-button>

        <h1>支付宝口令</h1>

        <el-row v-for="(value, index) in ruleForm.zfb" :key="index">
          <el-col :span="9">
            <div class="">
                <el-form-item label="口令"  label-width="100px" :key="index"
                :prop="'zfb[' + index + ']'"
                :rules="{required: true, message: '口令不能为空', trigger: 'blur'}"
                >
                <el-input v-model="ruleForm.zfb[index]" />
                </el-form-item>
            </div>
            </el-col>
          <el-col :span="4"><div class="" style="line-height: 40px;">
            <el-button style="margin-left: 20px;" @click="delidList('zfb',index)" icon="el-icon-minus" circle size="mini"></el-button>
          </div></el-col>
        </el-row>

        <el-button style="margin-left: 100px;" @click="addkl('zfb')" icon="el-icon-plus" circle ></el-button>

        <br/>
        <br/>
        <el-button
           plain
            type="primary"
            :loading='addloading'
            @click="handleChange"
          >提交</el-button>

      </el-form>

    </div>
  </template>
  
  <script>
  import { getkouling, updatekouling} from "@/api/adv_admin/config.js";
  import waves from "@/directive/waves"; // waves directive
  import { Message } from "element-ui";
  export default {
    name: "web",
    directives: { waves },
    data() {
      return {
        ruleForm: {},
        rules: {
  
        },
        addloading: false,
        platform: {
          'dy': '抖音',
          'ks': '快手',
          'zfb': '支付宝',
        }
      };
    },
    created() {
      this.getconfig()
    },
    methods: {
      getconfig(){
        getkouling().then(res => {
          if (res.STATUS == 200){
            this.ruleForm = res.DATA.dict
            console.log(this.ruleForm)
          }
        })
      },
      handleChange(){
        this.$refs['ruleForm'].validate((valid) => {
            if (valid) {
                this.addloading = true
                updatekouling({value: JSON.stringify(this.ruleForm)}).then(res => {
                    if(res.STATUS == 200){
                        Message.success('修改成功')
                    }
                    this.addloading = false
                })
            }

        })
      },
      addkl(res){
        this.ruleForm[res].push('')
      },
      delidList(res, index){
        this.ruleForm[res].splice(index,1)
      }
    },
  };
  </script>
  
  <style scoped>
  .zs{
    padding-left: 20px;
    color: #878787;
  }
  .box {
    margin: 200px auto;
    width: 1000px;
  }
  .selectBox {
    width: 100%;
    text-align: center;
  }
  .btnBox {
    margin-top: 30px;
    text-align: center;
  }
  .linkMargin {
    margin-right: 20px;
  }
  @media (max-width: 550px) {
    .box {
      margin: 200px auto;
      width: 320px;
    }
    .filter-item {
      margin-top: 10px;
    }
    .linkMargin {
      margin-right: 0px;
    }
  }
  </style>
  